<template>
	<div>
		<el-row>
			<el-col :span="4" v-for="(val, index) in mvlistData" :key="index"
				:offset="index > 0 && index%5 != 0 ? 1 : 0">
				<el-card :body-style="{ padding: '0px' }">
					<div @click="getmvurlData(val)">
						<img :src="val.cover" class="image">
						<div style="padding: 14px;">
							<span>{{val.name}}</span>
							<div class="bottom clearfix">
								<time class="time" v-for="(val1, index1) in val.artists" :key="index1">{{ val1.name }}
									{{index1 < val.artists.length - 1 ? '、' : ''}}</time>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center @close="tcclose">
			<div>
				<vue-core-video-player :src="mvurlData">
				</vue-core-video-player>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'mvlist',
		data() {
			return {
				//前10mv数据
				mvlistData: [],
				//mvUrl
				mvurlData: "",
				centerDialogVisible: false
			};
		},
		created() {
			this.gettensingerData();
		},
		methods: {
			//获取前10mv数据
			async gettensingerData() {
				let {
					data: ret
				} = await this.$http.get("/mv/exclusive/rcmd?limit=10")
				//console.log(ret)
				this.mvlistData = ret.data;
			},

			async getmvurlData(val) {
				let {
					data: ret
				} = await this.$http.get("/mv/url?id=" + val.id)
				//console.log(ret)
				this.centerDialogVisible = true;
				this.mvurlData = ret.data.url;
			},
			tcclose() {
				this.centerDialogVisible = false;
				this.mvurlData = "";
			}
		}
	}
</script>

<style lang="less" scoped>
	.row-bg {
		margin-bottom: 40px;
	}

	.el-carousel__item img {
		width: 100%;
		height: 100%;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 283px;
		height: 230px;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.el-col-4 {
		height: 310px;
	}
</style>
